<template>
  <div class="home">
    <HomeHeader ></HomeHeader>
    <HomePopups class="HomePopups" ></HomePopups>
    <HomeMain ></HomeMain>
    <HomeExcel ></HomeExcel>
    <!-- 1.使用根模块state的数据 -->
    <!-- <p>{{$store.state.username}}</p>  -->
    <!-- 2.使用根模块getters的数据 -->
     <!-- <p>{{$store.getters.newName}}</p> -->
    <!-- <p>{{$store.state.arr}}</p> -->
    <!-- <button @click="mutationsFn">使用mutations更改数据</button> -->
    <!-- {{agg}} -->
  {{info}}
  <!-- {{city}} -->
  <!-- {{arr}} -->
  </div>
</template>

<script>
import {  useStore } from 'vuex'
// import { mapActions } from 'vuex'
// import { mapState } from 'vuex'
// import http from "./util/axios";
import axios from 'axios';
import HomeHeader from "./components/header.vue"
import HomePopups from "./components/popups.vue"
import HomeMain from "./components/main.vue"
import HomeExcel from "./components/excel.vue"
// eslint-disable-line no-unused-vars
export default {
  components:{
      HomeHeader,
      HomePopups,
      HomeMain,
      HomeExcel
  },
  setup () {
    // 1. 使用vuex仓库
    const store = useStore()
    // 1. 使用根模块state的数据
    // console.log(store.state.username)
    
    // 2.使用根模块getters的数据
    // console.log(store.getters.newName)
    // const agg=store.state.arr.data.data.forecast[0].high
    const mutationsFn = () => {
      // 3. 提交根模块mutations函数
      // store.commit('updateName')
      // 4.调用根模块actions函数
      store.dispatch('updateName')
    }
    // store.dispatch("")
    // console.log(this.data.info)
    return { mutationsFn }
  },
    data () {
    return {
      arr:this.$store.state.arr,
      info: null
    }
  },

  created () {
    // let that
    axios
      .get("/api/api/weather/city/101280101")
      .then((res) =>{
        let _this = this;
        // 把数据传到vuex里面
        _this.$store.commit("setData", res.data);
        // this.info = res.data
         //res.data.data 为请求返回的数据
      })
  }
  }
</script>
<style scoped>
 .home{
  width: 100%;
  height: 100rem;
  /* background: #ff00ff !important; */
 }
</style>